import React, { useState, useEffect } from "react";
import { Button, Popconfirm, Space, Tag } from "antd";
import MyTemplate1 from "../../shared/myTemplate1";
import useCloseLoadingOnMount from "../../../utils/hook/useCloseLoadingOnMount";
import { useNavigate } from "react-router-dom";

const PromoteManage = () => {
  useCloseLoadingOnMount();
  const [dataSource, setDataSource] = useState([]);
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [searchText, setSearchText] = useState("");
  const navigate = useNavigate();

  // 替换静态数据
  const mockPromotions = [
    {
      id: 1,
      accountId: 101,
      goodId: 201,
      originalPrice: 100.0,
      discountPrice: 80.0,
      isPublish: 1,
      startTime: new Date("2024-01-01T00:00:00"),
      startTimeStr: "2024-01-01 00:00:00",
      endTime: new Date("2024-01-10T23:59:59"),
      endTimeStr: "2024-01-10 23:59:59",
      createAt: new Date("2023-12-31T12:00:00"),
      createAtStr: "2023-12-31 12:00:00",
      updateAt: new Date("2024-01-05T14:30:00"),
      updateAtStr: "2024-01-05 14:30:00",
    },
    {
      id: 2,
      accountId: 102,
      goodId: 202,
      originalPrice: 200.0,
      discountPrice: 150.0,
      isPublish: 0,
      startTime: new Date("2024-02-01T00:00:00"),
      startTimeStr: "2024-02-01 00:00:00",
      endTime: new Date("2024-02-15T23:59:59"),
      endTimeStr: "2024-02-15 23:59:59",
      createAt: new Date("2024-01-10T10:00:00"),
      createAtStr: "2024-01-10 10:00:00",
      updateAt: null,
      updateAtStr: null,
    },
    // 可继续添加更多模拟数据...
  ];

  // 模拟 API 请求
  const fetchPromotions = async (params = {}) => {
    setLoading(true);
    // 模拟网络延迟
    await new Promise((resolve) => setTimeout(resolve, 500));

    // 简单过滤逻辑
    const filteredData = mockPromotions.filter(
      (item) =>
        item.startTimeStr.includes(searchText) ||
        item.endTimeStr.includes(searchText)
    );

    setDataSource(filteredData);
    setPagination({
      ...pagination,
      total: filteredData.length,
    });
    setLoading(false);
  };

  useEffect(() => {
    fetchPromotions();
  }, [pagination.current, pagination.pageSize, searchText]);

  const columns = [
    {
      title: "编号",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "发布人编号",
      dataIndex: "accountId",
      key: "accountId",
    },
    {
      title: "活动商品编号",
      dataIndex: "goodId",
      key: "goodId",
    },
    {
      title: "原价",
      dataIndex: "originalPrice",
      key: "originalPrice",
      render: (price) => `¥${price.toFixed(2)}`,
    },
    {
      title: "活动价",
      dataIndex: "discountPrice",
      key: "discountPrice",
      render: (price) => `¥${price.toFixed(2)}`,
    },
    {
      title: "是否发布",
      dataIndex: "isPublish",
      key: "isPublish",
      render: (status) => (
        <Tag color={status === 1 ? "green" : "red"}>
          {status === 1 ? "已发布" : "未发布"}
        </Tag>
      ),
    },
    {
      title: "开始时间",
      dataIndex: "startTimeStr",
      key: "startTimeStr",
    },
    {
      title: "结束时间",
      dataIndex: "endTimeStr",
      key: "endTimeStr",
    },
    {
      title: "创建时间",
      dataIndex: "createAtStr",
      key: "createAtStr",
    },
    {
      title: "修改时间",
      dataIndex: "updateAtStr",
      key: "updateAtStr",
    },
    {
      title: "操作",
      key: "action",
      fixed: "right",
      render: (_, record) => (
        <Space size="middle">
          <Button color="yellow" variant="filled" onClick={handleEdit}>
            编辑
          </Button>
          <Popconfirm
            title="删除日志"
            description="你确定要删除该日志吗?"
            onConfirm={() => handleDelete(record.id)}
            okText="Yes"
            cancelText="No"
          >
            <Button color="red" variant="filled">
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const handleAdd = () => {
    navigate("add");
  };

  const handleEdit = () => {};

  const handleSearch = (e) => {
    setSearchText(e.target.value);
  };

  return (
    <MyTemplate1
      searchProps={{
        placeholder: "搜索活动时间",
        onChange: handleSearch,
      }}
      addButtonProps={{
        text: "新增活动",
        onClick: handleAdd,
      }}
      columns={columns}
      dataSource={dataSource}
      loading={loading}
      pagination={pagination}
      onPageChange={(page, pageSize) => {
        setPagination({
          ...pagination,
          current: page,
          pageSize,
        });
      }}
    />
  );
};

export default PromoteManage;
